<template>
    <div ref="artRef"></div>
  </template>
  
  <script>
  import Artplayer from "artplayer";
  import Hls from 'hls.js';
  import artplayerPluginHlsControl from 'artplayer-plugin-hls-control';
  export default {
    data() {
      return {
        instance: null,
      };
    },
    props: {
      option: {
        type: Object,
        required: true,
      },
    },
    mounted() {
      this.instance = new Artplayer({
        ...this.option,
        container: this.$refs.artRef,
        plugins: [
            artplayerPluginHlsControl({
                // quality: {
                //     // Show qualitys in control
                //     control: true,
                //     // Show qualitys in setting
                //     setting: true,
                //     // Get the quality name from level
                //     getName: (level) => level.height + 'P',
                //     // I18n
                //     title: 'Quality',
                //     auto: 'Auto',
                // },
                audio: {
                    // Show audios in control
                    control: true,
                    // Show audios in setting
                    setting: true,
                    // Get the audio name from track
                    getName: (track) => track.name,
                    // I18n
                    title: 'Audio',
                    auto: 'Auto',
                }
            })
        ],
        customType: {
            m3u8: function playM3u8(video, url, art) {
                if (Hls.isSupported()) {
                    if (art.hls) art.hls.destroy();
                    const hls = new Hls();
                    hls.loadSource(url);
                    hls.attachMedia(video);
                    art.hls = hls;
                    art.on('destroy', () => hls.destroy());
                } else if (video.canPlayType('application/vnd.apple.mpegurl')) {
                    video.src = url;
                } else {
                    art.notice.show = 'Unsupported playback format: m3u8';
                }
            }
        },
      });
  
      this.$nextTick(() => {
        this.$emit("get-instance", this.instance);
      });
    },
    beforeDestroy() {
      if (this.instance && this.instance.destroy) {
        this.instance.destroy(false);
      }
    },
  };
  </script>